<template>
	<div class="index-box" ref="index">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="search" ref="search">
					<el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
						class="demo-form-inline" id="searchBox">
						<el-form-item prop="versionName">
							<el-input v-model="searchForm.versionName" clearable placeholder="版本名称"></el-input>
						</el-form-item>
						<el-form-item prop="clientVersion">
							<el-input v-model="searchForm.clientVersion" clearable placeholder="版本号"></el-input>
						</el-form-item>
						<el-form-item prop="updateType">
                <el-select  v-model="searchForm.updateType" clearable placeholder="是否强制更新">
                  <el-option value="3" label="是">是</el-option>
                  <el-option value="2" label="否">否</el-option>
                </el-select>
						</el-form-item>
						<el-form-item prop="clientType">
							<el-select  v-model="searchForm.clientType" clearable placeholder="应用端">
							  <el-option value="2" label="Android">Android</el-option>
							  <el-option value="3" label="iOS">iOS</el-option>
							</el-select>
						</el-form-item>
            <el-form-item prop="status">
                <el-select  v-model="searchForm.status" clearable placeholder="状态">
                  <el-option value="1" label="启用">启用</el-option>
                  <el-option value="2" label="禁用">禁用</el-option>
                </el-select>
            </el-form-item>
						<el-form-item prop="time">
							<el-date-picker v-model="time" type="daterange" align="right" unlink-panels
								range-separator="至" start-placeholder="上传开始日期" end-placeholder="上传结束日期"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item class="clearfix">
							<el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
							<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="actionBtn" ref="actionBtn">
					<div class="actionBtnLeft">
						<el-button type="primary" @click="handleAdd()" size="small" icon="el-icon-add" v-has="'system:clientVersionUpdate:add'">添加版本</el-button>
					</div>
					<div class="actionBtnRight">
						<MyRefresh></MyRefresh>
						<!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn"
							:tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
					</div>
				</div>

				<div class="table" ref="table">
					<el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading" stripe >
						<el-table-column prop="versionName" label="版本名称" v-if="!hideTableColumn.includes('number')" align="center">
              <template slot-scope="scope">
              	<span>V{{scope.row.versionName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="clientVersion" label="版本号" v-if="!hideTableColumn.includes('number')" align="center"></el-table-column>
            <el-table-column prop="storeCode" label="发布应用端" v-if="!hideTableColumn.includes('number')" align="center">
              <template slot-scope="scope">
              	<span v-if="scope.row.clientType=='2'">Android</span>
                <span v-else-if="scope.row.clientType=='3'">iOS</span>
              </template>
            </el-table-column>
            <el-table-column prop="storeCode" label="是否强制更新" v-if="!hideTableColumn.includes('number')" align="center">
              <template slot-scope="scope">
              	<span v-if="scope.row.updateType=='2'">否</span>
                <span v-else-if="scope.row.updateType=='3'">是</span>
              </template>
            </el-table-column>
            <el-table-column prop="tipPeriod" label="提示周期(天)" v-if="!hideTableColumn.includes('number')" align="center"></el-table-column>
            <el-table-column prop="storeCode" label="状态" v-if="!hideTableColumn.includes('number')" align="center">
              <template #default="scope">
                <div class="d-flex justify-center"><MySwitch :value.sync="scope.row.status"  text="启用|禁用" textValue="1|2" @changeStatus="handleChangeStatus(scope.row)" :permission="hasBtn('system:clientVersionUpdate:state')"></MySwitch></div>
              </template>
            </el-table-column>>
						<el-table-column prop="createTime" label="上传时间" v-if="!hideTableColumn.includes('applyTime')" align="center" width="180"></el-table-column>
						<el-table-column prop="name" label="操作" width="200" align="center" fixed="right">
							<template #default="scope">
								<el-button size="medium" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" v-has="'system:clientVersionUpdate:edit'">修改</el-button>
                <el-button size="medium" type="text" icon="el-icon-delete-solid" @click="handleDelt(scope.row)" v-has="'system:clientVersionUpdate:delt'">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="page" ref="page">
					<MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
						@pagination="dataInfo" />
				</div>
			</el-col>
		</el-row>

		<!-- 添加版本	 -->
		<el-dialog :title="dialogTitle" width="800px" :close-on-click-modal="false" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false">
			<el-form id="userDialog" :model="versionsForm" label-position="right" :rules="rules" ref="versionsForm">
        <el-form-item label="版本名称:" prop="versionName" label-width="125px">
        	<el-input v-model="versionsForm.versionName"  autocomplete="off"  placeholder="请填写版本名称"><template slot="prepend">V</template></el-input>
        </el-form-item>
        <el-form-item label="版本号:" prop="clientVersion" label-width="125px">
        	<el-input v-model="versionsForm.clientVersion"  autocomplete="off"  placeholder="请填写版本号"></el-input>
        </el-form-item>
        <el-form-item label="是否强制更新:" prop="updateType" label-width="125px">
        	 <el-radio-group v-model="versionsForm.updateType">
              <el-radio label="3">是</el-radio>
              <el-radio label="2">否</el-radio>
        	  </el-radio-group>
        </el-form-item>
        <el-form-item label="提示周期:" prop="tipPeriod" label-width="125px" v-if="versionsForm.updateType=='2'">
        	<el-input v-model="versionsForm.tipPeriod"  autocomplete="off"  placeholder="请填写提示周期">
             <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="发布应用端:" prop="clientType" label-width="125px">
        	<el-radio-group v-model="versionsForm.clientType">
        	   <el-radio label="2">Android</el-radio>
        	   <el-radio label="3">iOS</el-radio>
        	 </el-radio-group>
        </el-form-item>
				<el-form-item label="图片:" prop="tipPicUrl" label-width="125px">
             <MyUpImg :imagePreview='versionsForm.tipPicUrl'  imageSize="chang" @change="imageChange($event, 'tipPicUrl')"></MyUpImg>
				</el-form-item>
				<el-form-item label="版本更新说明:" prop="tipUpdate" label-width="125px">
					<el-input v-model="versionsForm.tipUpdate" type="textarea" autocomplete="off" :rows="4" placeholder="请填写版本更新说明">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="hanldeSubmitAddVersions('versionsForm')" size="small" :loading="btnLoading">确 定
				</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import common from '@/api/api';
	import {
		clientVersionUpdateAdd,
		clientVersionUpdateDel,
    clientVersionUpdateDetail,
    clientVersionUpdateEdit,
    clientVersionUpdateList,
	} from '@/api/getData';
	import option from '../../common/option.js';

	export default {
		data() {
			let that = this;
			return {
				sta: true,
				loading: false,
				btnLoading: false,
				time: [],
				searchForm: {
					versionName:'',
          clientVersion:'',
          updateType:'',
          clientType:'',
          status:'',
					pageNum: 1,
					pageSize: 20,
				},
				storeList: [],
				tableColumn: [],
				hideTableColumn: [],
				/*自定义表格列需要隐藏的*/
				tableColumnType: 'staffManagement',
				/*自定义表格列类型传参*/
				tableHeight: 0, //table 高度
				statusRow: {},
				dataList: [],
				total: 0,
				multipleSelection: '',
				dialogTitle: '',
        addVisible:false,
        versionsForm:{
          id:'',
          versionName:'',
          clientVersion:'',
          updateType:'',
          tipPeriod:'',
          clientType:'',
          tipPicUrl:'',
          tipUpdate:'',
        },
				rules: {
					versionName: [{
						required: true,
						message: '请填写版本名称',
						trigger: 'blur'
					}],
					clientVersion: [{
						required: true,
						message: '请填写版本号',
						trigger: 'blur'
					}],
          updateType: [{
          	required: true,
          	message: '请选择是否强制更新',
          	trigger: 'blur'
          }],
          tipPeriod: [{
          	required: true,
          	message: '请填写提示周期',
          	trigger: 'blur'
          }],
          clientType: [{
          	required: true,
          	message: '请选择发布应用端',
          	trigger: 'blur'
          }],
          tipUpdate: [{
          	required: true,
          	message: '请输入版本更新说明',
          	trigger: 'blur'
          }],

				},
			}
		},
		computed: {
			pickerOptions: () => {
				return option.pickerOptions;
			}
		},
		created() {
		},
		mounted() {
			this.dataInfo();
			this.$nextTick(() => {
				this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs
					.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
			})
		},
		methods: {
      hanldeSubmitAddVersions(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.versionsForm));
            if(this.dialogTitle=='新增版本'){
              clientVersionUpdateAdd(data).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.addVisible = false;
                  this.dataInfo();
                } else {
                  this.$message.error(result.msg);
                }
                this.btnLoading = false;
              });
            }else{
              clientVersionUpdateEdit(data).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.addVisible = false;
                  this.dataInfo();
                } else {
                  this.$message.error(result.msg);
                }
                this.btnLoading = false;
              });
            }

          }
        })
      },
      handleDelt(row){
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          clientVersionUpdateDel(row.id).then((result) => {
            if (result.code == 200) {
              this.dataInfo();
              this.$message.success(result.msg);
            } else {
              this.$message.error(result.msg);
            }
          });
        }).catch(() => {
        });
      },
      async handleChangeStatus(row) {
        try {
          let data = JSON.parse(JSON.stringify(row));
          const result = await clientVersionUpdateEdit(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.status = !row.status;
          }
        } catch (err) {
          console.log(err)
        }
      },
      imageChange(path, name) {
        this.versionsForm[name] = path
      },
			resetQuery() {
				this.time = [];
				this.auditTime = [];
				this.resetForm('searchForm');
				this.dataInfo();
			},
			handleSearch() {
				this.page = 1;
				this.dataInfo();
			},
			handleEdit(row) {
        this.versionsForm.id = row.id;
        this.versionsForm.versionName = row.versionName;
        this.versionsForm.clientVersion = row.clientVersion;
        this.versionsForm.updateType = row.updateType+'';
        this.versionsForm.tipPeriod = row.tipPeriod;
        this.versionsForm.clientType = row.clientType+'';
        this.versionsForm.tipPicUrl = row.tipPicUrl;
        this.versionsForm.tipUpdate = row.tipUpdate;
				this.dialogTitle = '修改版本';
				this.addVisible = true;
			},
			handleAdd() {
        this.versionsForm = {
          id:'',
          versionName:'',
          clientVersion:'',
          updateType:'',
          tipPeriod:'',
          clientType:'',
          tipPicUrl:'',
          tipUpdate:'',
        };
        this.dialogTitle = '新增版本';
				this.addVisible = true;
			},
			async dataInfo() {
				try {
					let data = this.addDateRange(this.searchForm, this.time, 'createTimeStart', 'createTimeEnd');
					this.loading = true;
					const result = await clientVersionUpdateList(data);
					if (result.code == 200) {
						this.total = result.total;
						this.dataList = result.rows;
            console.log(this.dataList)
					} else {
						this.$message.error(result.msg);
					}
					this.loading = false;
				} catch (err) {
					this.loading = false;
					console.log(err)
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.searchAddress /deep/ .el-input {
		width: 350px !important;
	}

	.el-table .el-dropdown-link {
		cursor: pointer;
		color: #61997A;
		margin-left: 5px;
	}

	.leftDialog {
		height: 540px;
		overflow-y: auto;
	}

	.activeVerticalBox .activeItem {
		color: #61997A;
		cursor: pointer;
		margin: 0px;
		text-align: center;
		height: 20px;
		line-height: 20px;
	}

	.activeVerticalBox .el-dropdown {
		display: flex;
		justify-content: center;
		color: #61997A;
		cursor: pointer;
	}

	.activeCheckedBox {
		border-top: 1px solid #ddd;
		padding: 10px;
		height: 52px;

		.el-tag {
			margin-right: 10px;
		}
	}

	.rateBox /deep/ .el-rate__icon {
		margin-right: 0px;
	}

	.rateBox>p {
		margin: 0px;
	}

	.rateBox>p>/deep/ .el-rate {
		height: 25px;
		line-height: 25px;
		display: flex;
	}

	.rateBox>p>/deep/ .el-rate .el-rate__item {
		display: flex;
		align-items: center;
	}

	.rateBox .rateText {
		width: 60px;
	}

	.rateBox .content {
		display: flex;
	}

	.rateBox .el-tooltip {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
</style>
